<!DOCTYPE html>
<html>
	<head>
		<title>好友列表</title>
		<!-------------------- 公共头部 --------------------------->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		
		<link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/mui.previewimage.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/css.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/swiper.min.css"/>
		<script type="text/javascript" src="../static/js/swiper.min.js"></script>
		<script type="text/javascript" src="../static/js/mui.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../static/js/localImg.js"></script>
		<script type="text/javascript" src="../static/js/mobileImg.js"></script>
		<script type="text/javascript" src="../static/js/mui.zoom.js"></script>
		<script type="text/javascript" src="../static/js/mui.previewimage.js"></script>
<!-- 		<script type="text/javascript" src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
		
		<style type="text/css">
			.divHeight {
			    width: 100%;
			    height: 5px;
			    background: #f5f5f5;
			    position: relative;
			    overflow: hidden;
			}
			
			.mui-show-loading {  
			    position: fixed;  
			    padding: 5px;  
			    width: 120px;  
			    min-height: 120px;  
			    top: 45%;  
			    left: 50%;  
			    margin-left: -60px;  
			    background: rgba(0, 0, 0, 0.6);  
			    text-align: center;  
			    border-radius: 5px;  
			    color: #FFFFFF;  
			    visibility: hidden;  
			    margin: 0;  
			    z-index: 2000;  
			
			    -webkit-transition-duration: .2s;  
			    transition-duration: .2s;  
			    opacity: 0;  
			    -webkit-transform: scale(0.9) translate(-50%, -50%);  
			    transform: scale(0.9) translate(-50%, -50%);  
			    -webkit-transform-origin: 0 0;  
			    transform-origin: 0 0;  
			}  
			.mui-show-loading.loading-visible {  
			    opacity: 1;  
			    visibility: visible;  
			    -webkit-transform: scale(1) translate(-50%, -50%);  
			    transform: scale(1) translate(-50%, -50%);  
			}  
			.mui-show-loading .mui-spinner{  
			    margin-top: 24px;  
			    width: 36px;  
			    height: 36px;  
			}  
			.mui-show-loading .text {  
			    line-height: 1.6;  
			    font-family: -apple-system-font,"Helvetica Neue",sans-serif;  
			    font-size: 14px;  
			    margin: 10px 0 0;  
			    color: #fff;  
			}  
			
			.mui-show-loading-mask {  
			  position: fixed;  
			  z-index: 1000;  
			  top: 0;  
			  right: 0;  
			  left: 0;  
			  bottom: 0;  
			}  
			.mui-show-loading-mask-hidden{  
			    display: none !important;  
			}
			
			.list-nothing {
			    width: 100%;
			    height: 4rem;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
			    line-height: 1.01;
			}
			.list-nothing__icon {
			    background: url(../static/img/bg_nothing.png) no-repeat 0 0;
			    background-size: contain;
			    width: 2rem;
			    height: 2rem;
			}
			.list-nothing__text {
			    margin-top: 0.4rem;
			    font-size: 0.2rem;
			    color: #151617;
			}
		</style>
		
		<script type="text/javascript">
			//扩展mui.showLoading  
			(function($, window) {  
			    //显示加载框  
			    $.showLoading = function(message,type) {  
			        if ($.os.plus && type !== 'div') {  
			            $.plusReady(function() {  
			                plus.nativeUI.showWaiting(message);  
			            });  
			        } else {  
			            var html = '';  
			            html += '<i class="mui-spinner mui-spinner-white"></i>';  
			            html += '<p class="text">' + (message || "数据加载中") + '</p>';  
		
			            //遮罩层  
			            var mask=document.getElementsByClassName("mui-show-loading-mask");  
			            if(mask.length==0){  
			                mask = document.createElement('div');  
			                mask.classList.add("mui-show-loading-mask");  
			                document.body.appendChild(mask);  
			                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                mask[0].classList.remove("mui-show-loading-mask-hidden");  
			            }  
			            //加载框  
			            var toast=document.getElementsByClassName("mui-show-loading");  
			            if(toast.length==0){  
			                toast = document.createElement('div');  
			                toast.classList.add("mui-show-loading");  
			                toast.classList.add('loading-visible');  
			                document.body.appendChild(toast);  
			                toast.innerHTML = html;  
			                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                toast[0].innerHTML = html;  
			                toast[0].classList.add("loading-visible");  
			            }  
			        }     
			    };  
		
			    //隐藏加载框  
			      $.hideLoading = function(callback) {  
			        if ($.os.plus) {  
			            $.plusReady(function() {  
			                plus.nativeUI.closeWaiting();  
			            });  
			        }   
			        var mask=document.getElementsByClassName("mui-show-loading-mask");  
			        var toast=document.getElementsByClassName("mui-show-loading");  
			        if(mask.length>0){  
			            mask[0].classList.add("mui-show-loading-mask-hidden");  
			        }  
			        if(toast.length>0){  
			            toast[0].classList.remove("loading-visible");  
			            callback && callback();  
			        }  
			      }  
			})(mui, window);
		</script>
<!-------------------- 公共头部 --------------------------->
		
		<link rel="stylesheet" type="text/css" href="../static/css/friends.css"/>
	</head>
	<body>
		<div class="mui-content">
			<div class="diaog1" style="display: none;">
				<div class="info1">
					<span style="display: block;margin: .3rem 0;text-align: center;">添加好友</span>
					<input type="text" name="" id="mg_name" value="" placeholder="梦缘号"/>
					<textarea type="text" name="" id="mg_conton" value="" placeholder="验证信息" style="padding: .1rem .3rem;" maxlength="9"></textarea>
					<div style="display: flex;"><button type="button" id="mg-sub">确认</button><button type="button" style="background: #ee9ca7;" id="mg-reg">取消</button></div>
				</div>
			</div>
			<div class="addlist" style="display: none;">
				<ul>
				<h4 style="text-align: center;line-height: 1rem;">好友申请</h4>
				 <li>
					<img src="../static/img/login-bg.jpeg" alt="">
					<div style="display: inline-block;height: 1.2rem;padding: .1rem 0;line-height: .5rem;"><span>流痕</span><p>请求添加你为好友</p></div>
					<button type="button">拒绝</button>
					<button type="button">同意</button>
				</li> 
				</ul>
			</div>
			<div class="fr-item">
				<li onclick="javascript:mui.toast('功能暂未开放',{ duration:'10', type:'div' });"  id="newfriend">
				<img src="../static/img/new.png" alt=""><font>新朋友</font>
				</li>
				<li onclick="javascript:mui.toast('功能暂未开放',{ duration:'10', type:'div' });"  >
				<img src="../static/img/management.png" alt=""><span>群组</span>
				</li>
				<li onclick="javascript:mui.toast('功能暂未开放',{ duration:'10', type:'div' });"  id="addfriend">
				<img src="../static/img/create_group.png" alt=""><span>添加好友</span>
				</li>
			</div>
			
			<div style="margin: .2rem 0.1rem;font-size: .25rem;color: #999;">好友列表(<font id="friend"> 2 </font>)</div>
			
			<ul class="mui-table-view" id="myfriend">
				 <li class="mui-table-view-cell" >
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<a href="javascript:;" onclick="mui.openWindow({url:'chat.html'})">
						<div class="mui-slider-handle" style="bottom: .1rem;">
							<img src="../static/images/100.jpg" alt=""/>
							<span class="mui-media-body">小宝同学</span>
						</div>
					</a>
				</li> 
				<li class="mui-table-view-cell" >
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<a href="javascript:;" onclick="mui.openWindow({url:'chat.html'})">
						<div class="mui-slider-handle" style="bottom: .1rem;">
							<img src="../static/images/100.jpg" alt=""/>
							<span class="mui-media-body">小贝同学</span>
						</div>
					</a>
				</li> 
				<div class="divHeight"></div>
			</ul>
			
			
		</div><br/><br/><br/>	
		<footer>
			<li onclick=mui.openWindow('message.html')><span>
				<img src="../static/img/tabs/info.svg" ></span><span >消息</span>
			</li>
			<li onclick=mui.openWindow('friends.html')>
				<span><img src="../static/img/tabs/friend.1.svg" ></span><span style="color:#01CAFD">TA</span>
			</li>
			<li onclick=mui.openWindow('share.html')>
				<span><img src="../static/img/tabs/find.svg" ></span><span >日记</span>
			</li>
			<li onclick=mui.openWindow('home.html')>
				<span><img src="../static/img/tabs/min.svg" ></span><span >我的</span>
			</li>
		</footer>
	</body>
</html>